<template>
    <div class="level">
        <div class="level-body">
            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide v-for="(page,pI) in levels">
                    <img src="../assets/img/level.png" alt="">
                    <div class="num-div">
                        <div @click="toWord(item)" v-for="(item,i) in page" :class="['num'+(page.length-i),item.status?'active':'']">
                            {{(levels.length-1-pI)*len+(page.length-i)}}
                            <img src="../assets/img/level-lock.png" alt="">
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
        <router-link tag="div" to="/personal" class="head">
            <img src="../assets/img/logo.png" alt="">
        </router-link>
    </div>
</template>
<script>

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import io from 'api/io'
import util from 'util'
export default {
    components: {
        swiper,
        swiperSlide
    },
    data() {
        return {
            id: this.$route.query.id,
            swiperOption: {
                direction: 'vertical',
                freeMode: true,
                freeModeSticky: true,
                height: window.innerHeight,
            },
            levels: [],
            len: 6
        }
    },
    created() {
        this.getUnitList()
    },
    mounted() {
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        }
    },
    methods: {
        async toWord(item) {
            if (item.wordCount) {
                let { data } = await io.post(io.passUnit, { wordRepoId: this.id, wordUnitId: item.id, })
                if (data.success) {
                    this.$router.push({ path: '/word', query: { id: item.id ,title:item.name,bookId:this.id} })
                }
            } else {
                Toast('该关卡暂未开放，敬请期待')
            }
        },
        async getUnitList() {
            let { data } = await io.post(io.getUnitList, { wordRepoId: this.id })
            if (data.success) {
                this.levels = util.reSetArr(data.data, this.len).reverse()
                this.levels.map((item, i) => {
                    item = item.reverse()
                })
                let actNum = 0
                data.data.map((item, i) => {
                    if (item.status === 1) {
                        actNum = i
                    }
                })
                this.$nextTick().then(() => {
                    let toNum = parseInt(actNum / this.len)
                    this.swiper.slideTo(this.levels.length - 1 - toNum, 1, false)
                })
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.level
    .head
        width 40px
        height 40px
        position fixed
        top 20px
        left 20px
        z-index 111
    .level-body
        position relative
        width 100%
        img 
            width 100%
            height 100%
            display block
        .num-div
            position absolute
            bottom 0
            width 100%
            div
                width 6vh
                height 6vh
                border 4px solid #82da9f
                border-radius 50%
                display flex
                align-items center
                justify-content center
                font-size 30px
                color #5c8634
                font-weight bold
                position relative
                background white
                img 
                    width 20px
                    height 20px
                    position absolute
                    right -10px
                    bottom -4px
                @media screen and (min-width: 600px)  {
                    width 9vh
                    height 9vh
                    font-size 60px
                    img {
                        width 40px
                        height 40px
                    }
                    &.num1{
                        top -3vh !important
                        left 36% !important
                    }
                    &.num2{
                        left 32% !important
                        top -9vh !important
                    }
                    &.num3{
                        left 40% !important
                        top -15vh !important
                    }
                    &.num4{
                        top -21vh !important
                        left 55% !important
                    }
                    &.num5{
                        top -27vh !important
                        left 64% !important
                    }
                    &.num6{
                        top -32vh !important
                        left 60% !important
                    }
                    &.num7{
                        top -53vh !important
                        left 58% !important
                    }
                    &.num8{
                        top -61vh !important
                        left 56% !important
                    }
                    &.num9{
                        top -69vh !important
                        left 48% !important
                    }
                }
                &.active
                    color #ffa800
                    border-color #ffa800
                    img 
                        display none
            .lock
                position absolute
                bottom 0
                right 0
            .num1
                left 33%
                top -10vh
            .num2
                left 35%
                top -19vh
            .num3
                left 47%
                top -28vh
            .num4
                left 60%
                top -37vh
            .num5
                left 64%
                top -46vh
            .num6
                left 53%
                top -55vh
            .num7
                left 56%
                top -40vh
            .num8
                left 58%
                top -30vh
            .num9
                left 57%
                top -34vh
</style>
